<template>
    <view class="app">
        <view class="app-container text-center">
            <view class="flex flex-direction justify-center">
                <view class="bg-img"></view>
                <view class="text-xsl padding">
                    <text class="cuIcon-info text-primary"></text>
                </view>
				<text class="text-primary text-lg padding">
				    在下单前，请先按指引
				    点击【发送消息】并发送任意消息
				    返回后点击完成，即可进行下单
				</text>
            </view>
            <view class="action">
				<button v-if="status === 0" open-type="contact" type="warn" class="margin-tb-sm">
				    发送消息
				</button>
				<button v-if="status === 1" type="primary" class="margin-tb-sm">
				    消息已发送
				</button>
                <navigator url="/pages/tabbar/index" open-type="switchTab">
                    <button :disabled="status === 1 ? false : true" type="primary">
                        完成
                    </button>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
	import { checkWechatUserCustomerMessage } from '@/api/user.js'

    export default {
        onShow() {
            this.checkWechatUserCustomerMessage() // 检查用户是否发送客服消息以及剩余客服消息次数是否为0
        },
        data() {
            return {
				// 是否已发送消息
				status: 0
            }
        },
        methods: {
			// 检查用户是否发送客服消息以及剩余客服消息次数是否为0
            checkWechatUserCustomerMessage() {
				checkWechatUserCustomerMessage().then(res => {
					if (res.result.message === 'WITHOUT_TIME' || res.result.message === 'WITHOUT_AMOUNT') {
						this.status = 0;
					} else {
						this.status = 1;
					}
				})
            }
        }
    }
</script>

<style lang="scss">
    .app-container {
        height: 100%;
        position: relative;

        .flex {
            height: 50%;
            position: relative;
        }

        .bg-img {
            opacity: 0.5;
            height: 100%;
            width: 100%;
            position: absolute;
        }

        .action {
            bottom: 36px;
            left: 16px;
            right: 16px;
            position: absolute;
            height: 35%;

            .back {
                background: #fff !important;
            }
        }
    }
</style>
